<template>
  <div class="">

   <template>
<div>
  <el-table
    :data="this.data.list"
    style="width: 100%;margin-bottom: 20px;margin-top: 20px;"
    row-key="id"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="id"
      sortable>
    </el-table-column>
    <el-table-column
      prop="name"
      label="name"
      sortable>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <figcaption style="display:flex;">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </figcaption>
          <!-- <el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button> -->
      </template>
    </el-table-column>
    <el-table-column
      >
      <template slot="header">
        <el-button type="primary" @click="dialog = true">新增科室</el-button>
      </template>
      </el-table-column>
  </el-table>
</div>
</template>
<figcaption>
  <el-drawer
  :title=title
  :before-close="handleClose"
  :visible.sync="dialog"
  direction="rtl"
  custom-class="demo-drawer"
  ref="drawer"
  >
  <div class="demo-drawer__content">
    <el-tabs type="border-card">
  <el-tab-pane label="新增主科室">
      <el-form :model="form">
      <el-form-item label="新增主科" :label-width="formLabelWidth">
        <el-input v-model="form.name1" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
     <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
    </el-tab-pane>
  <el-tab-pane label="增加附科室">
<el-form :model="form">
       <el-form-item label="所属科室：">
    <el-select v-model="form1.departmentId" placeholder="请选择科室">
    <figcaption v-for="item in  data.list" :key="item.id">
       <el-option-group v-if="item.children" :label="item.name">
        <el-option :label="abc.name"   :value="abc.id" v-for="abc in item.children" :key="abc.id"></el-option>
    </el-option-group>
       <el-option :label="item.name" :value="item.id" v-else></el-option>
    </figcaption>
  </el-select>
  </el-form-item>
        <el-form-item label="附科室" :label-width="formLabelWidth">
        <el-input v-model="form1.childern" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
     <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </el-tab-pane>
</el-tabs>
  </div>
</el-drawer>
</figcaption>
  </div>

</template>

<script>
import { getdepartments, departments, updepartments, uptwodepartment, putpartment } from '@/api/hospital'
export default {
  data() {
    return {
      title: '新增科室',
      table: false,
      dialog: false,
      loading: false,
      form: {
        name1: '',
        name2: '',
      },
      form1: {
        departmentId: '',
        childern: '',
      },
      formLabelWidth: '80px',
      timer: null,
      input: '',
      multipleSelection: [],
      data: '',
      deletdid: '',
    }
  },
  methods: {
    handleClose(done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            if (this.form.name1) {
              updepartments(this.form.name1).then((data) => {
                console.log(data)
                getdepartments().then((data) => { this.data = data })
                this.form.name1 = ''
                console.log(this.data)
              })
            }
            if (this.form1.childern) {
              console.log(this.form1)
              uptwodepartment(this.form1.departmentId, this.form1.childern).then((data) => {
                console.log(data)
                this.$message({
                  type: 'success',
                  message: '增加成功',
                })
                getdepartments().then((data) => { this.data = data })
                this.form1.childern = ''
              })
            }
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch(_ => {})
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
    async  handleEdit(index, row) {
      console.log(index, row)
      this.$prompt('请输入名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确',
      }).then(({ value }) => {
        if (value) {
          putpartment(value, row.id, row.pid).then((data) => {
            console.log(data)
            getdepartments().then((data) => { this.data = data })
          })
        }
        console.log(index, row)
        console.log(value)
        this.$message({
          type: 'success',
          message: '修改成功',
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入',
        })
      })
    },
    async handleDelete(index, row) {
      console.log(index, row)
      this.deletdid = await departments(row.id)
      this.data = await getdepartments()
      console.log(this.deleteid)
      console.log(this.data.list)
    },
    handleClick() {
      alert('button click')
    },
  },
  async created() {
    this.data = await getdepartments()
    console.log(this.data.list)
  },
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
